﻿@using SquishIt.Framework
@using SquishIt.Mvc
@using Viettel.VOFFICE.Resources
@using Viettel.VOFFICE.Web.Models
@*Hiển thị luồng để hỗ trợ chọn lựa sử dụng trong quá trình vào sổ văn bản đến*@
@{

    if (ViewBag.Flow != null)
    {
        var flow = (FlowModel)ViewBag.Flow;
        var list = ViewBag.FlowList as List<KeyValueModel>;
        if (list != null && list.Count > 0)
        {
            <div class="left">
                <span class="left" style="margin-top: 5px; margin-right: 10px;">
                    @Resources.FlowDetailsSelectFlow
                </span>
                <select id="flow-details-flow-id" class="left">
                    @foreach (var item in list)
                    {
                        <option value="@item.Key" @if ((int)item.Key == flow.Id)
                                                  {
                                                      @Html.Raw("selected='selected'");
                                                  }>@item.Value</option> 
                    }
                </select>
            </div>
    <div class="clear"></div>
            <div class="left">
                <ul style="float: left;
                            margin-top: 10px;
                            margin-left: 18px;
                            line-height: 19px;">
                    <li>
                        <span>@Resources.FlowDetailsDescription: </span>
                        <span>
                            @flow.Description
                        </span>
                    </li>
                    <li>
                        <span>@Resources.FlowDetailsFor: </span>
                        <span>@if (flow.IsCommon == true)
                              {
                                  @Resources.FlowDetailsCommon
                              }
                              else
                              {
                                  @flow.DocTypeName
                              }
                        </span>
                    </li>
                    <li>
                        <span>@Resources.FlowDetailsActive: </span>
                        <span>
                            <input type="checkbox" disabled="disabled" @if(flow.IsActive == true){ @Html.Raw("checked='checked'")}/>
                        </span>
                    </li>
                </ul>
            </div>
        }
        var nodes = ViewBag.Nodes as List<NodeModel>;
        <div id="node-list-flow-details" style="float: left">
            @if (nodes != null && nodes.Any())
            {
                var i = 0;
                foreach (var nodeModel in nodes)
                {
                    var top = (50 + 70 * i) + "px";
                    var left = (10 + 220 * (i % 3)) + "px";
                    i++;
                <div class="clear">
                </div>
                <div class="w" id="n-@nodeModel.Id" data-id="@nodeModel.Id" relation="@nodeModel.NextNodeJson" style="top: @top; left:@left;" >
                    <div id="name-@nodeModel.Id" title="@nodeModel.Description">@nodeModel.Name</div>
                    <div class="clear" />
                    <div>
                        @if (nodeModel.UserInNode.Any())
                        {
                            foreach (var uin in nodeModel.UserInNode)
                            {
                            <div class="clear" />
                            <input type="checkbox" readonly="readonly" disabled="disabled" @if (uin.Selected == true)
                                                                                           {
                                                                                                @Html.Raw("checked='checked'");
                                                                                           } />
                            @uin.Value
                            }
                        }
                    </div>
                    <div class="ep">
                    </div>
                </div>  
                }
            }
        </div>
    }
}
<style type="text/css">
    #node-list-flow-details
    {
        position: relative;
        width: 100%;
    }
    .w
    {
        width: 160px;
        padding: 1em;
        position: absolute;
        border: 1px solid black;
        z-index: 4;
        border-radius: 1em;
        border: 1px solid #346789;
        box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
        -o-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
        -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
        -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.25);
        -moz-border-radius: 0.5em;
        border-radius: 0.5em;
        opacity: 0.8;
        filter: alpha(opacity=80);
        cursor: move;
    }
    .aLabel
    {
        background-color: white;
        opacity: 0.8;
        padding: 0.3em;
    }
    .ep
    {
        float: right;
        width: 1em;
        height: 1em;
        background-color: #994466;
        cursor: pointer;
        display: none;
    }
    ._jsPlumb_endpoint
    {
        z-index: 3;
    }
    #opened
    {
        left: 10em;
        top: 5em;
    }
    .dragHover
    {
        border: 1px dotted red;
    }
    path
    {
        cursor: pointer;
    }
</style>
@*//jsPlumb*@
@(Bundle.JavaScript()
    .Add("~/Scripts/jsPlumb/lib/jquery.ui.touch-punch.min.js")
    .Add("~/Scripts/jsPlumb/lib/jsBezier-0.5.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-util-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-dom-adapter-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-defaults-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-connectors-statemachine-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-renderers-svg-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-renderers-canvas-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jsPlumb-renderers-vml-1.4.0-RC1.js")
    .Add("~/Scripts/jsPlumb/1.4.0/jquery.jsPlumb-1.4.0-RC1.js")
    .ForceRelease()
    .MvcRender("~/Scripts/jsPlumb/jquery.jsPlumb.min.js")
)
<script type="text/javascript">
    $(document).ready(function () {
        var $nodeList = $('#node-list-flow-details');

        $('#flow-details-flow-id').bind('change', function (event) {
            var $target = $(event.currentTarget);
            if ($target && $target.length > 0) {
                VH.ShowFlowDetails($target.val());
            }
        });

        var curColourIndex = 1, maxColourIndex = 24, nextColour = function () {
            var r, g, b;
            r = parseInt(128 + Math.sin((curColourIndex * 3 + 0) * 1.3) * 128);
            g = parseInt(128 + Math.sin((curColourIndex * 3 + 1) * 1.3) * 128);
            b = parseInt(128 + Math.sin((curColourIndex * 3 + 2) * 1.3) * 128);
            curColourIndex = curColourIndex + 1;
            if (curColourIndex > maxColourIndex) curColourIndex = 1;
            return "rgb(" + r + "," + g + "," + b + ")";
        };
        var jsPlumbNode = {
            ///<summary>
            /// Khởi tạo thư viện tạo quan hệ luồng giữa các nút
            ///</summary>
            init: function () {

                // setup some defaults for jsPlumb.	
                jsPlumb.importDefaults({
                    Endpoint: ["Dot", { radius: 2}],
                    HoverPaintStyle: { strokeStyle: "#42a62c", lineWidth: 2 },
                    ConnectionOverlays: [
                            ["Arrow", {
                                location: 1,
                                id: "arrow",
                                length: 14,
                                foldback: 0.8
                            }],
                            ["Label", { label: " ", id: "label"}]
                        ]
                });

                // sưa sự kiện kéo thả vào từng node
                jsPlumb.draggable($(".w"));

                // Sư kiện xẩy ra khi một quan hệ giữa các node bị hủy
                jsPlumb.bind("click", function (c) {
                    jsPlumb.detach(c);
                });

                // biến các node có div với class ="ep" có khả năng tạo ra các quan hệ
                $(".ep").each(function (i, e) {
                    var p = $(e).parent();
                    jsPlumb.makeSource($(e), {
                        parent: p,
                        anchor: "Continuous",
                        connector: ["StateMachine", { curviness: 20}],
                        connectorStyle: { strokeStyle: nextColour(), lineWidth: 2 },
                        maxConnections: 5,
                        onMaxConnections: function (info, e) {
                            alert("Maximum connections (" + info.maxConnections + ") reached");
                        }
                    });
                });

                // sự kiện xẩy ra sau  khi một quan hệ giữa các nút được thiết lập
                jsPlumb.bind("connection", function (info) {
                    //Lấy thông tin từ info và lưu vào csdl ở đây
                    info.connection.setPaintStyle({ strokeStyle: nextColour() });
                });

                // initialise all '.w' elements as connection targets.
                jsPlumb.makeTarget($(".w"), {
                    dropOptions: { hoverClass: "dragHover" },
                    anchor: "Continuous"
                });
            }
        };
        /* 
        Khởi tạo quan hệ giữa các node 
        */
        var initRelation = function () {
            ///<summary>
            /// Khỏi tạo quan hệ giữa các nút với thông tin từ các attribute của các nút (html)
            ///</summary>
            var divNodes = $nodeList.find('.w');
            if (divNodes.length > 0) {
                _.each(divNodes, function (node) {
                    var strNextNodes = $(node).attr('relation');
                    if (!!strNextNodes) {
                        var nextNodes = JSON.parse(strNextNodes);
                        if (!!nextNodes && nextNodes.length > 0) {
                            _.each(nextNodes, function (id) {
                                jsPlumb.connect({
                                    source: $(node).attr('id'),
                                    target: "n-" + id
                                });
                            });
                        }
                    }
                });
            }
        };
        jsPlumbNode.init();
        initRelation();
    });
</script>
